<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- Meta, title, CSS, favicons, etc. -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>查看购买记录</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- Font Awesome -->
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!-- NProgress -->
		<!-- Custom Theme Style -->
		<link href="css/custom.min.css" rel="stylesheet">
	</head>

	<body class="nav-md">
		<div class="container body">
			<div class="main_container">
				<div id="head">
						</div>

				<!-- top navigation -->
			
				<!-- /top navigation -->

				<!-- page content -->
				<div class="right_col" role="main">
					<div id="main" style="width: 600px;height:400px;"></div>
				<!-- /page content -->

				<!-- footer content -->
				
				<!-- /footer content -->
			</div>
		</div>

		<!-- jQuery -->
		<script src="js/jquery.min.js"></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.min.js"></script>
		<!-- FastClick -->
		<script src="js/fastclick.js"></script>
		<!-- NProgress -->
		<script src="js/nprogress.js"></script>
		<!-- validator -->
		<script src="js/validator.js"></script>
		<script src="js/echarts.js"></script>
		<!-- Custom Theme Scripts -->

		<!-- validator -->
		<script>
				var myChart = echarts.init(document.getElementById('main'));
				// 指定图表的配置项和数据

option = {
    title: {
        text: '用户交易金额',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2018年', '2019年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    },
    series: [
        {
            name: '2018年',
            type: 'bar',
            data: [12100,31542,14520, 14820, 21315, 0,18203, 23489, 29034, 24200, 31000, 31200]
        },
        {
            name: '2019年',
            type: 'bar',
            data: [19325, 0, 0, 0, 0, 0,0, 0, 0, 0, 0, 0]
        }
    ]
};
				
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				
				$(document).ready(function(){
					$("#head").load("head.html");
				});
			// initialize the validator function
			validator.message.date = 'not a real date';

			// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
			$('form')
				.on('blur', 'input[required], input.optional, select.required', validator.checkField)
				.on('change', 'select.required', validator.checkField)
				.on('keypress', 'input[required][pattern]', validator.keypress);

			$('.multi.required').on('keyup blur', 'input', function() {
				validator.checkField.apply($(this).siblings().last()[0]);
			});

			$('form').submit(function(e) {
				e.preventDefault();
				var submit = true;

				// evaluate the form using generic validaing
				if (!validator.checkAll($(this))) {
					submit = false;
				}

				if (submit)
					this.submit();

				return false;
			});
		</script>
		<!-- /validator -->
	</body>
</html>
